<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:template match="/">
		<html>
			<head>
				<title><xsl:value-of select="objetoEducativo/datos/nombre"/></title>
				<script type="text/javascript" src="js/mootools.js"></script>
				<script type="text/javascript">
					window.addEvent('domready', function() {
						var slideDivDatos		= new Fx.Slide('divDatos');
						var slideDivMDatos		= new Fx.Slide('divMDatos');
						var slideDivRecursos	= new Fx.Slide('divRecursos');

						$('todo_slideOut').addEvent('click', function(e){
							e.stop();
							slideDivDatos.slideOut();
							slideDivMDatos.slideOut();
							slideDivRecursos.slideOut();
						});
						
						$('todo_slideIn').addEvent('click', function(e){
							e.stop();
							slideDivDatos.slideIn();
							slideDivMDatos.slideIn();
							slideDivRecursos.slideIn();
						});
						
						$('datos_toggle').addEvent('click', function(e){
							e.stop();
							slideDivDatos.toggle();
						});

						$('mDatos_toggle').addEvent('click', function(e){
							e.stop();
							slideDivMDatos.toggle();
						});

						$('recursos_toggle').addEvent('click', function(e){
							e.stop();
							slideDivRecursos.toggle();
						});
					});
				</script> 
			</head>
			<link rel="stylesheet" href="style.css" type="text/css"/>
			<body>
			<a id="inicio" />
<!-- ENCABEZAMIENTO -->
			<div id="header">
				<h1><xsl:value-of select="objetoEducativo/datos/nombre"/></h1>
				<div style="position: absolute; top: 0px; right: 0px;">
					<img src="logo.png" align="right"/>
				</div>
			</div>
<!-- INDICE -->
			<div id="leftcol">
				<h3>Índice</h3>
				<ol>
					<li><a href="#datos">Datos</a></li>
					<li><a href="#metadatos">Metadatos</a></li>
					<li><a href="#recursos">Recursos</a>
						<ul>
							<xsl:for-each select='objetoEducativo/recursos'>
								<li>
									<a>
										<xsl:if test="./tipo = 'Objeto virtual'">
											<xsl:attribute name="href"><xsl:value-of select="./referencia"/></xsl:attribute>
											<xsl:value-of select="./ID"/>
										</xsl:if>
										<xsl:if test="./tipo != 'Objeto virtual'">
											<xsl:value-of select="./ID"/>
										</xsl:if>
									</a>
								</li>
							</xsl:for-each>
						</ul>
					</li>
				</ol>
			</div>
<!-- CONTENIDO -->
			<div id="content">
			    <br/>
			    <xsl:if test="objetoEducativo/metadatos/clasificacion/ruta != '0'">
			    	Ruta: <a href="index.xml">Raíz</a>
			    	<xsl:for-each select='objetoEducativo/rutaRecorrida'>
						 > 
						 <a>
							<xsl:attribute name="href"><xsl:value-of select="./enlace"/></xsl:attribute>
							<xsl:value-of select="./titulo"/>
						 </a>
					</xsl:for-each>
					<br/><br/>
				</xsl:if>
			    <a id="todo_slideOut" href="#">Contraer todo</a> / 
				<a id="todo_slideIn" href="#">Expandir todo</a>
<!-- DATOS -->
				<a name="datos"></a>
					<h3><a id="datos_toggle" href="#"><img src="datos.png"/>Datos del Objeto</a></h3>
				
					<div id="divDatos">
						<h4>
							Nombre:
						</h4>
							<p>
							<xsl:value-of select="objetoEducativo/datos/nombre"/>
							</p>
						<h4>
							Descripción:
						</h4>
							<p>
							<xsl:value-of select="objetoEducativo/datos/descripcionDatos"/>
							</p>
						<br/>
					</div>
<!-- METADATOS -->
				<a name="metadatos">
					<h3><a id="mDatos_toggle" href="#"><img src="metadatos.png"/>Metadatos</a></h3>
				</a>
					<div id="divMDatos">
						<h4>Descripción:</h4>
							<p>
							<xsl:value-of select="objetoEducativo/metadatos/descripcionMetadatos"/>
							</p>
						
						<h4>Ciclo de vida:</h4>
							<table width="60%" align="center">
								<tr>
									<th width="20%"><b>Estado</b></th>
									<th width="40%"><b>Entidad</b></th>
									<th width="30%"><b>Papel</b></th>
									<th width="10%"><b>Fecha</b></th>
								</tr>
								<tr>
									<td align="center"><xsl:value-of select="objetoEducativo/metadatos/cicloDeVida/estado"/></td>
									<td align="center"><xsl:value-of select="objetoEducativo/metadatos/cicloDeVida/entidad"/></td>
									<td align="center"><xsl:value-of select="objetoEducativo/metadatos/cicloDeVida/papel"/></td>
									<td align="center"><xsl:value-of select="objetoEducativo/metadatos/cicloDeVida/fecha"/></td>
								</tr>
							</table>	
						<h4>Clasificación:</h4>
							<table width="60%" align="center">
								<tr>
									<th width="33%"><b>Fuente</b></th>
									<th width="33%"><b>Ruta</b></th>
									<th width="34%"><b>Taxón</b></th>
								</tr>
								<tr>
									<td align="center"><xsl:value-of select="objetoEducativo/metadatos/clasificacion/fuente"/></td>
									<td align="center"><xsl:value-of select="objetoEducativo/metadatos/clasificacion/ruta"/></td>
									<td align="center"><xsl:value-of select="objetoEducativo/metadatos/clasificacion/taxon"/></td>
								</tr>
							</table>
						<br/>
					</div>
<!-- RECURSOS -->
				<a name="recursos">
					<h3><a id="recursos_toggle" href="#"><img src="recursos.png"/>Recursos</a></h3>
				</a>
					<div id="divRecursos">
						<table width="90%" align="center">
							<tr>
								<th width="10%"><b>ID</b></th>
								<th width="15%"><b>Tipo</b></th>
								<th width="55%"><b>Descripción</b></th>
								<th width="20%"><b>Referencia</b></th>
							</tr>
							<xsl:for-each select='objetoEducativo/recursos'>
								<tr>
									<xsl:if test="position() mod 2 = 0">
										<xsl:attribute name="class">even</xsl:attribute>
									</xsl:if>
									<td><xsl:value-of select="./ID"/></td>
									<td align="center"><xsl:value-of select="./tipo"/></td>
									<td><xsl:value-of select="./descripcionRecursos"/></td>
									
									<xsl:if test="./tipo = 'Objeto virtual'">
										<td><a><xsl:attribute name="href"><xsl:value-of select="./referencia"/>
										</xsl:attribute>
										<xsl:value-of select="./referencia"/></a></td>
									</xsl:if>

									<xsl:if test="./tipo = 'Recurso propio' or ./tipo = 'Recurso externo'">
										<td><a><xsl:attribute name="href">recursos/<xsl:value-of select="./referencia"/>
										</xsl:attribute>
										<xsl:value-of select="./referencia"/></a></td>
									</xsl:if>

									<xsl:if test="./tipo = 'Recurso propio imagen' or ./tipo = 'Recurso externo imagen'">
										<td align="center"><a>
											<xsl:attribute name="href">recursos/<xsl:value-of select="./referencia"/>
											</xsl:attribute>
											<img width="100">
												<xsl:attribute name="src">recursos/<xsl:value-of select="./referencia"/>
												</xsl:attribute>
											</img>
										</a></td>
									</xsl:if>
									
									<xsl:if test="./tipo != 'Objeto virtual' and ./tipo != 'Recurso propio' and ./tipo != 'Recurso externo' and ./tipo != 'Recurso propio imagen' and ./tipo != 'Recurso externo imagen'">
										<td><a><b>###ERROR###</b><br/>Tipo debe ser "Recurso propio", "Recurso externo" o "Foto"</a></td>
									</xsl:if>
								</tr>
							</xsl:for-each>
						</table>
						<br/>
					</div>
					<a href="#inicio">Volver arriba</a>
				</div>
				<div id="footer">
					PLg 2008-2009 ::
					<a href="http://www.w3.org/TR/xslt" target="_blank">XSL</a> ::
					<a href="http://www.w3schools.com/css/css_examples.asp" target="_blank">CSS</a>
				</div>			
			</body>

		</html>
	</xsl:template>
</xsl:stylesheet>